<template>
<div>in</div>
</template>

<script setup lang="ts">
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";

//breforeCreate created setup语法糖模式是没有这两个生命周期的 setup去代替

console.log('setup')
//创建
onBeforeMount(() => {
  console.log('===============>创建之前')
})
onMounted(() => {
  console.log('===============>创建完成')
})
//更新
onBeforeUpdate(() => {
  console.log('===============>更新之前')
})
onUpdated(() => {
  console.log('===============>更新完成')
})
//销毁
onBeforeUnmount(() => {
  console.log('===============>销毁之前')
})
onMounted(() => {
  console.log('===============>销毁完成')
})
const res = ref(0)
</script>

<style scoped>

</style>